<template>
  <div class="p-2">
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="20">
          <el-col :span="24" style="position: relative">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
              <el-tab-pane :label="`${labelList[0]?.label} (${labelList[0]?.count})`" name="first">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(item, index) in deviceList" :key="index">
                    <div class="p-6 list-content">
                      <div class="header">
                        <div class="header-left">
                          <h5>
                            <span :class="backColor(item.onLine)">{{ backStatus(item.onLine) }}</span>
                            {{ item.name }}
                          </h5>
                          <div style="padding: 10px 0; font-size: 12px">mac：{{ item.mac }}</div>
                          <span>更新时间：{{ item.onLineTime }}</span>
                        </div>
                        <div class="header-right">
                          <el-switch
                            v-model="item.status"
                            style="--el-switch-on-color: #00b383; --el-switch-off-color: #1f1a24"
                            @change="changeSw(index, item.onLine)"
                          >
                            <template #active-action>
                              <span class="custom-active-action">|</span>
                            </template>
                            <template #inactive-action>
                              <span class="custom-active-action">|</span>
                            </template>
                          </el-switch>
                        </div>
                      </div>
                      <div class="content" v-if="item.deviceTargetLogVoList.length">
                        <div class="content-item" v-for="(n, k) in item.deviceTargetLogVoList" :key="k">
                          <div class="num" :class="n.status === 2 ? 'error' : ''">{{ n.targetValue }}</div>
                          <span class="name">{{ n.name }}</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-empty style="margin: 50px auto" v-if="deviceList.length === 0" description="暂无数据" />
                </el-row>
              </el-tab-pane>
              <el-tab-pane :label="`${labelList[1]?.label} (${labelList[1]?.count})`" :name="labelList[1]?.status">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(item, index) in deviceList" :key="index">
                    <div class="p-6 list-content">
                      <div class="header">
                        <div class="header-left">
                          <h5>
                            <span :class="backColor(item.onLine)">{{ backStatus(item.onLine) }}</span>
                            {{ item.name }}
                          </h5>
                          <div style="padding: 10px 0; font-size: 12px">mac：{{ item.mac }}</div>
                          <span>更新时间：{{ item.onLineTime }}</span>
                        </div>
                        <div class="header-right">
                          <el-switch
                            v-model="item.status"
                            style="--el-switch-on-color: #00b383; --el-switch-off-color: #1f1a24"
                            @change="changeSw(index, item.onLine)"
                          >
                            <template #active-action>
                              <span class="custom-active-action">|</span>
                            </template>
                            <template #inactive-action>
                              <span class="custom-active-action">|</span>
                            </template>
                          </el-switch>
                        </div>
                      </div>
                      <div class="content" v-if="item.deviceTargetLogVoList.length">
                        <div class="content-item" v-for="(n, k) in item.deviceTargetLogVoList" :key="k">
                          <div class="num" :class="n.status === 2 ? 'error' : ''">{{ n.targetValue }}</div>
                          <span class="name">{{ n.name }}</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-empty style="margin: 50px auto" v-if="deviceList.length === 0" description="暂无数据" />
                </el-row>
              </el-tab-pane>
              <el-tab-pane :label="`${labelList[2]?.label} (${labelList[2]?.count})`" :name="labelList[2]?.status">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(item, index) in deviceList" :key="index">
                    <div class="p-6 list-content">
                      <div class="header">
                        <div class="header-left">
                          <h5>
                            <span :class="backColor(item.onLine)">{{ backStatus(item.onLine) }}</span>
                            {{ item.name }}
                          </h5>
                          <div style="padding: 10px 0; font-size: 12px">mac：{{ item.mac }}</div>
                          <span>更新时间：{{ item.onLineTime }}</span>
                        </div>
                        <div class="header-right">
                          <el-switch
                            v-model="item.status"
                            style="--el-switch-on-color: #00b383; --el-switch-off-color: #1f1a24"
                            @change="changeSw(index, item.onLine)"
                          >
                            <template #active-action>
                              <span class="custom-active-action">|</span>
                            </template>
                            <template #inactive-action>
                              <span class="custom-active-action">|</span>
                            </template>
                          </el-switch>
                        </div>
                      </div>
                      <div class="content" v-if="item.deviceTargetLogVoList.length">
                        <div class="content-item" v-for="(n, k) in item.deviceTargetLogVoList" :key="k">
                          <div class="num" :class="n.status === 2 ? 'error' : ''">{{ n.targetValue }}</div>
                          <span class="name">{{ n.name }}</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-empty style="margin: 50px auto" v-if="deviceList.length === 0" description="暂无数据" />
              </el-tab-pane>
              <el-tab-pane :label="`${labelList[3]?.label} (${labelList[3]?.count})`" :name="labelList[3]?.status">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(item, index) in deviceList" :key="index">
                    <div class="p-6 list-content">
                      <div class="header">
                        <div class="header-left">
                          <h5>
                            <span :class="backColor(item.onLine)">{{ backStatus(item.onLine) }}</span>
                            {{ item.name }}
                          </h5>
                          <div style="padding: 10px 0; font-size: 12px">mac：{{ item.mac }}</div>
                          <span>更新时间：{{ item.onLineTime }}</span>
                        </div>
                        <div class="header-right">
                          <el-switch
                            v-model="item.status"
                            style="--el-switch-on-color: #00b383; --el-switch-off-color: #1f1a24"
                            @change="changeSw(index, item.onLine)"
                          >
                            <template #active-action>
                              <span class="custom-active-action">|</span>
                            </template>
                            <template #inactive-action>
                              <span class="custom-active-action">|</span>
                            </template>
                          </el-switch>
                        </div>
                      </div>
                      <div class="content" v-if="item.deviceTargetLogVoList.length">
                        <div class="content-item" v-for="(n, k) in item.deviceTargetLogVoList" :key="k">
                          <div class="num" :class="n.status === 2 ? 'error' : ''">{{ n.targetValue }}</div>
                          <span class="name">{{ n.name }}</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-empty style="margin: 50px auto" v-if="deviceList.length === 0" description="暂无数据" />
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <div class="flex-right">
            <el-input v-model="queryParams.name" style="width: 300px" placeholder="请输入关键词" :suffix-icon="Search" @change="getList" />
          </div>
        </el-row>
      </template>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { getUserDeviceList, getDeviceCount } from '@/api/device/device';
import { DeviceVO, DeviceQuery, DeviceForm, DeviceCountVO } from '@/api/device/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hardware_parameters } = toRefs<any>(proxy?.useDict('hardware_parameters'));

const loading = ref(true);

const deviceList = ref<DeviceVO[]>([]);
const labelList = ref<DeviceCountVO[]>([]);
const activeName = ref('first');
const keyword = ref('');
const total = ref(0);

const initFormData: DeviceForm = {
  id: undefined,
  name: undefined,
  sn: undefined,
  mac: undefined,
  onLine: undefined,
  categoryIds: undefined,
  brandId: undefined,
  sort: undefined,
  activationTime: undefined,
  status: undefined,
  targetId: undefined,
  details: undefined,
  settingEnvironmentBo: null,
  settingElectricBo: null,
  settingTemperatureBo: null
};
const data = reactive<PageData<DeviceForm, DeviceQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    onLine: undefined,
    name: undefined
  },
  rules: {
    value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询用户设备列表 */
const getList = async () => {
  loading.value = true;
  const res = await getUserDeviceList(queryParams.value);
  res.rows.forEach((row) => {
    row.status = row.onLine === 0 ? false : true;
  });
  deviceList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
/** 获取设备全部 在线 离线的状态的数量 */
const getAllDeviceCount = async () => {
  loading.value = true;
  const res = await getDeviceCount();
  labelList.value = res.data;
};

const handleClick = (tab: any) => {
  queryParams.value.onLine = tab === 'first' ? '' : tab;
  getList();
};

const backStatus = (row: number | string) => {
  let str;
  switch (row) {
    case 0:
      str = '离线';
      break;
    case 1:
      str = '在线';
      break;
    case 2:
      str = '故障';
      break;
  }
  return str;
};
const backColor = (row: number | string) => {
  let str;
  switch (row) {
    case 0:
      str = '';
      break;
    case 1:
      str = 'lineColor';
      break;
    case 2:
      str = 'errorColor';
      break;
  }
  return str;
};

const changeSw = (index, line) => {
  deviceList.value[index].onLine = line === 0 ? 1 : 0;
  deviceList.value[index].status = line === 0 ? true : false;
};

onMounted(() => {
  getList();
  getAllDeviceCount();
});
</script>
<style scoped lang="scss">
::v-deep .el-tabs__content {
  overflow: inherit;
}
.flex-right {
  position: absolute;
  right: 20px;
  top: 0px;
}
.list-content {
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin-bottom: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      h5 {
        position: relative;
        font-size: 16px;
        margin: 0;
        span {
          background: #cccccc;
          color: #333;
          padding: 2px 6px;
          margin-right: 10px;
          border-radius: 2px;
        }
        .lineColor {
          background: #e6f8f3;
          color: #00b383;
        }
        .errorColor {
          background: #fceeeb;
          color: #fa8a65;
        }
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
    &-right {
      .custom-active-action {
        font-size: 10px;
      }
    }
  }
  .content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    &-item {
      display: flex;
      flex-direction: column;
      width: 25%;
      text-align: center;
      font-size: 16px;
      margin-top: 30px;
      font-width: 600;
      .error {
        color: #fa8a65;
      }
      .name {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
        font-weight: normal;
      }
      .num {
        height: 24px;
        line-height: 24px;
      }
    }
  }
}
::v-deep .el-tag {
  border: none !important;
  background: transparent !important;
  font-size: 12px;
  color: #999 !important;
}
</style>
